import {Button, DatePicker, Form, Modal, Select, Space, Table} from "antd";
import {connect} from "react-redux";
import React from "react";
import locale from 'antd/es/date-picker/locale/zh_CN';

import {
  addDeviceAction,
  closeEditAction,
  deleteDeviceAction,
  openEditAction,
  queryAction,
} from "../actions/DeviceAction";
import DeviceForm from "../components/forms/DeviceForm";

class DevicePage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      deviceQueryParam: {
        onlineState: null,
        pushState: null,
        dateRange: []
      }
    }
    this.columns = [
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '正常推流码',
        dataIndex: 'common_code',
        key: 'common_code',
      },
      {
        title: '红外推流码',
        dataIndex: 'infrared_code',
        key: 'infrared_code',
      },
      {
        title: '离线',
        dataIndex: 'offline_flag',
        key: 'offline_flag',
        render: (record) => {
          return record === 1 ? '否' : '是'
        }
      },
      {
        title: '推流',
        dataIndex: 'push_flag',
        key: 'push_flag',
        render: (record) => {
          return record === 1 ? '否' : '是'
        }
      },
      {
        title: '添加时间',
        dataIndex: 'created_at',
        key: 'created_at',
      },
      {
        title: '修改时间',
        dataIndex: 'updated_at',
        key: 'updated_at',
      },
      {
        title: '操作',
        key: 'watch',
        render: (record) => {
          return <div>
            <Button size={"small"} onClick={() => {
              Modal.confirm(
                {
                  title: '警告',
                  content: '确定删除吗',
                  onOk: () => {
                    this.props.delete(record.id)
                  },
                  okText: '确定',
                  cancelText: '取消',
                }
              )
            }}>删除</Button>
            <Button size={"small"} onClick={() => {
              this.props.openEdit(record)
            }} style={{marginLeft: 2}}>修改</Button>
          </div>
        }
      },
    ]
  }

  UNSAFE_componentWillMount() {
    this.props.query({
      ...this.props.deviceQueryParam,
      pageable: this.props.pageable
    });
  }


  render() {
    const onFinish = values => {
      this.props.query(values)
    };

    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };
    let formRef = React.createRef();
    return <div>
      <Space align="center" style={{marginBottom: 16}}>
        <Form
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          ref={formRef}
          layout="inline"
        >
          <Form.Item>
            <Button onClick={() => {
              this.props.openEdit(this.props.deviceDetail)
            }}>
              添加
            </Button>
          </Form.Item>
          <Form.Item
            label="是否离线"
            name="onlineState"
            initialValue={this.state.deviceQueryParam.onlineState}
          >
            <Select style={{width: 120}}
                    placeholder="是否离线"
                    allowClear
            >
              <Select.Option value='1'>是</Select.Option>
              <Select.Option value='2'>否</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="是否推流"
            name="pushState"
            initialValue={this.state.deviceQueryParam.pushState}
          >
            <Select style={{width: 120}}
                    placeholder="是否推流"
                    allowClear
            >
              <Select.Option value='2'>是</Select.Option>
              <Select.Option value='1'>否</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="添加时间"
            name="dateRange"
            initialValue={this.state.deviceQueryParam.dateRange}
          >
            <DatePicker.RangePicker
              locale={locale}
            />
          </Form.Item>
          <Form.Item>
            <Button type={"primary"} htmlType={"submit"}>
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type={"primary"} htmlType={"reset"} onClick={() => {
              formRef.current.resetFields();
            }}>
              重置
            </Button>
          </Form.Item>
        </Form>
      </Space>
      <Table columns={this.columns} dataSource={this.props.deviceInfoList}/>
      {this.props.deviceEditVisible ? <DeviceForm  {...this.props}/> : null}
    </div>
  }
}

const mapStateToProps = (state) => {
  return {
    deviceInfoList: state.deviceReducer.deviceInfoList,
    deviceEditVisible: state.deviceReducer.deviceEditVisible,
    deviceDetail: state.deviceReducer.deviceDetail,
    deviceQueryParam: state.deviceReducer.deviceQueryParam,
    page: state.deviceReducer.page
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    query: (param) => dispatch(queryAction(param)),
    delete: (id) => dispatch(deleteDeviceAction(id)),
    add: (record) => dispatch(addDeviceAction(record)),
    openEdit: (record) => dispatch(openEditAction(record)),
    closeEdit: () => dispatch(closeEditAction()),
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DevicePage)